<template>
    <div id="mapContainer" class="mapContainer">
        <div style="position: absolute; top: 0; right: 0; z-index: 999">
            <button @click="query">查询工程属性</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Map from '@/map/index';
import jsonData from './中华人民共和国2.json'; //遮罩层数据
// import { weatherPointList } from '@/test/test.js';

import ImageLayer from 'ol/layer/Image';

import dmgis from '@/map/dmgis.js';

let olMap = ref(null); //定义地图实例

onMounted(() => {
    olMap.value = new Map('mapContainer');
    olMap.value.layer.initLayer(); //初始化底图

    let extent = olMap.value.layer.initMaskLayer(jsonData); //添加遮罩层,并将范围全局化
    olMap.value.layer.fitExtentPadding({
        extent: extent
    }); //跳转到遮罩层

    // addTile();//添加瓦片
    addPrj(); //初始化工程
});

//dm瓦片
let dmTileLayer = ref(null);
const addTile = () => {
    if (dmTileLayer.value) {
        olMap.value.map.removeLayer(dmTileLayer.value);
    }
    dmTileLayer.value = new dmgis.olmap.TileLayer('test', '/dmgis', dmgis.enum.DMGISTileType.Service, {
        extent: [73.441277, 5.037974, 135.08693, 66.683627],
        maxZoom: 10,
        minZoom: 1,
        projection: 'EPSG:4326'
    });
    olMap.value.map.addLayer(dmTileLayer.value);
};

//初始化工程
let dmProjectLayer;
let layerList = ref([]);
const addPrj = () => {
    //dimgis工程地图chinaProject,/dmgis用来配置代理
    dmProjectLayer = new dmgis.olmap.ServiceLayer('jwd', '/dmgis', {
        minZoom: 1,
        tileSize: [256, 256]
    });
    //获取工程的所有图层
    dmProjectLayer.InitService().then((res) => {
        layerList.value = res.RESPONSE.SERVER.LAYER;
    });
};
let tableData = ref([]);
const query = (sql) => {
    //查询参数构建
    let getfeaturePoint = dmProjectLayer.GetFeatureMapService();

    // getfeaturePoint.type = "1"//索引
    // getfeaturePoint.strlist = "1,2,3,4"

    // getfeaturePoint.type = "2"//实体号
    // getfeaturePoint.strlist = "1,2,3,4"

    getfeaturePoint.type = '0'; //条件
    getfeaturePoint.strlayername = '大厦';
    getfeaturePoint.sql.strSql = 'OBJECTID > 30000'; //切坡建房类别等于4 NAME = '丰成商务'

    // var rect = new dmgis.object.Envelope();
    // rect.minx
    // getfeaturePoint.sql.env  = rect;//矩形
    // getfeaturePoint.sql.strPos = "";//多边形
            addDmProject();

    dmProjectLayer.SendFeatureMapService(getfeaturePoint).then((res) => {
        if (res) {
            ElMessage.success('查询成功');

            //两种情况，返回结果为对象则转为数组用来渲染表格
            if (!Object.hasOwn(res.RESPONSE.FEATURES, 'FEATURE') && res.RESPONSE.FEATURES) {
                tableData.value = [];
            } else if (res.RESPONSE.FEATURES.FEATURE.length) {
                tableData.value = res.RESPONSE.FEATURES.FEATURE;
            } else {
                tableData.value = [res.RESPONSE.FEATURES.FEATURE];
            }
            console.log(tableData.value);
        } else {
            ElMessage.error('查询失败');
        }
    });


};
let layerName = '大厦';

let getPrjImgParam1 = {
    name: 'QUERY',
    singleLabel: true,
    attributes: {
        where: 'OBJECTID > 32000'
    }
};
let getPrjImgParam2 = {
    name: 'QUERY',
    singleLabel: true,
    attributes: {
        where: 'OBJECTID > 10'
    }
};
let moveEndListener = null; // 用于保存事件监听器的引用
let serviceLayer = null; //工程图层
let isMoveEndBound = false; // 标记是否已绑定

const getQueryParam = (extent, size) => {
    return {
        name: 'DMGISXML',
        version: '1.1',
        children: {
            name: 'REQUEST',
            children: {
                name: 'GET_IMAGE',
                attributes: {
                    minx: extent[0],
                    miny: extent[1],
                    maxx: extent[2],
                    maxy: extent[3],
                    width: size[0],
                    height: size[1],
                    bclr: '255,255,255',
                    disp: '0'
                },
                children: {
                    name: 'LAYERLIST',
                    children: [
                        {
                            name: 'LAYERDEF',
                            attributes: {
                                name: layerName,
                                visible: 1
                            },
                            children: getPrjImgParam1
                        },
                        {
                            name: 'LAYERDEF',
                            attributes: {
                                name: '地铁轻轨_polyline',
                                visible: 1
                            },
                            children: getPrjImgParam2
                        }
                    ]
                }
            }
        }
    };
};
//加载工程图片
const addDmProject = () => {
    if (olMap.value.layer.getLayerByName('工程图片图层')) {
        olMap.value.map.removeLayer(olMap.value.layer.getLayerByName('工程图片图层'));
    }

    dmProjectLayer.serviceLayer = new ImageLayer();
    dmProjectLayer.serviceLayer.setZIndex(2);

    serviceLayer = dmProjectLayer.serviceLayer;
    serviceLayer.set('layerName', '工程图片图层');

    /*------------------------------------请求参数必填项---------------------------------------*/
    let imgSvrParam = dmProjectLayer.ImgMapService;

    let extent = olMap.value.map.getView().calculateExtent(olMap.value.map.getSize());
    let size = olMap.value.map.getSize();
    //填参
    imgSvrParam.DispRect.minx = extent[0];
    imgSvrParam.DispRect.miny = extent[1];
    imgSvrParam.DispRect.maxx = extent[2];
    imgSvrParam.DispRect.maxy = extent[3];
    imgSvrParam.imgWid = size[0];
    imgSvrParam.imgHig = size[1];
    /*------------------------------------请求参数必填项---------------------------------------*/

    let param = getQueryParam(extent, size); //自定义参数

    //通过RefreshMap动态获取工程图片，实现地图的刷新
    dmProjectLayer.RefreshMap(
        serviceLayer,
        dmProjectLayer.ImgMapService,
        param,
        olMap.value.map.getView().getZoom()
    );
    olMap.value.map.addLayer(serviceLayer);

    // 保存事件监听器的引用
    moveEndListener = function (evt) {
        /*------------------------------------请求参数必填项---------------------------------------*/
        let frameState = evt.frameState;
        // 填参
        imgSvrParam.DispRect.minx = frameState.extent[0];
        imgSvrParam.DispRect.miny = frameState.extent[1];
        imgSvrParam.DispRect.maxx = frameState.extent[2];
        imgSvrParam.DispRect.maxy = frameState.extent[3];
        imgSvrParam.imgWid = frameState.size[0];
        imgSvrParam.imgHig = frameState.size[1];
        /*------------------------------------请求参数必填项---------------------------------------*/

        let param = getQueryParam(frameState.extent, frameState.size); //自定义参数
        dmProjectLayer.RefreshMap(serviceLayer, imgSvrParam, param, frameState.viewState.zoom);
    };

    //第一次添加moveend事件
    if (!isMoveEndBound) {
        olMap.value.map.on('moveend', moveEndListener);
        isMoveEndBound = true;
    }
};

let arr = [
    {
        codenumber: 'dzdl00000_20250724183906_100m',
        color: '65535',
        level: '0',
        posArr: [
            { lat: 28.28431, lon: 110.76376 },
            { lat: 28.28431, lon: 110.76387 },
            { lat: 28.28431, lon: 110.76398 },
            { lat: 28.28431, lon: 110.76409 },
            { lat: 28.28431, lon: 110.7642 },
            { lat: 28.28431, lon: 110.76431 },
            { lat: 28.28431, lon: 110.76442 },
            { lat: 28.28431, lon: 110.76453 },
            { lat: 28.28431, lon: 110.76464 },
            { lat: 28.28431, lon: 110.76478 },
            { lat: 28.28434, lon: 110.76487 },
            { lat: 28.28441, lon: 110.76494 },
            { lat: 28.28451, lon: 110.76499 },
            { lat: 28.28463, lon: 110.76502 },
            { lat: 28.28476, lon: 110.76502 },
            { lat: 28.28489, lon: 110.76501 },
            { lat: 28.28502, lon: 110.76498 },
            { lat: 28.28512, lon: 110.76491 },
            { lat: 28.28521, lon: 110.76478 },
            { lat: 28.2852, lon: 110.76464 },
            { lat: 28.28522, lon: 110.76453 },
            { lat: 28.28527, lon: 110.76444 },
            { lat: 28.28535, lon: 110.76436 },
            { lat: 28.28543, lon: 110.76429 },
            { lat: 28.28552, lon: 110.76422 },
            { lat: 28.28562, lon: 110.76416 },
            { lat: 28.28572, lon: 110.7641 },
            { lat: 28.28582, lon: 110.76404 },
            { lat: 28.28591, lon: 110.76398 },
            { lat: 28.286, lon: 110.76391 },
            { lat: 28.28606, lon: 110.76384 },
            { lat: 28.28611, lon: 110.76376 },
            { lat: 28.2861, lon: 110.76367 },
            { lat: 28.28605, lon: 110.76363 },
            { lat: 28.28598, lon: 110.76361 },
            { lat: 28.28588, lon: 110.76362 },
            { lat: 28.28578, lon: 110.76364 },
            { lat: 28.28566, lon: 110.76367 },
            { lat: 28.28553, lon: 110.7637 },
            { lat: 28.28539, lon: 110.76373 },
            { lat: 28.28521, lon: 110.76376 },
            { lat: 28.28508, lon: 110.76373 },
            { lat: 28.28495, lon: 110.76369 },
            { lat: 28.28482, lon: 110.76365 },
            { lat: 28.28469, lon: 110.76361 },
            { lat: 28.28457, lon: 110.76359 },
            { lat: 28.28446, lon: 110.76358 },
            { lat: 28.28437, lon: 110.76359 },
            { lat: 28.28432, lon: 110.76364 },
            { lat: 28.28431, lon: 110.76376 }
        ]
    },
    {
        codenumber: 'dzdl00000_20250724183906_100m',
        color: '65535',
        level: '0',
        posArr: [
            { lat: 28.29423, lon: 110.76476 },
            { lat: 28.29423, lon: 110.76489 },
            { lat: 28.29423, lon: 110.76502 },
            { lat: 28.29423, lon: 110.76515 },
            { lat: 28.29423, lon: 110.76528 },
            { lat: 28.29423, lon: 110.76541 },
            { lat: 28.29423, lon: 110.76554 },
            { lat: 28.29423, lon: 110.76578 },
            { lat: 28.29425, lon: 110.7659 },
            { lat: 28.2943, lon: 110.76601 },
            { lat: 28.29437, lon: 110.7661 },
            { lat: 28.29446, lon: 110.76619 },
            { lat: 28.29456, lon: 110.76628 },
            { lat: 28.29466, lon: 110.76636 },
            { lat: 28.29477, lon: 110.76644 },
            { lat: 28.29487, lon: 110.76652 },
            { lat: 28.29497, lon: 110.76661 },
            { lat: 28.29506, lon: 110.76669 },
            { lat: 28.29514, lon: 110.76679 },
            { lat: 28.29516, lon: 110.76691 },
            { lat: 28.29517, lon: 110.76704 },
            { lat: 28.29517, lon: 110.76717 },
            { lat: 28.29517, lon: 110.7673 },
            { lat: 28.29516, lon: 110.76744 },
            { lat: 28.29515, lon: 110.76757 },
            { lat: 28.29514, lon: 110.76781 },
            { lat: 28.29517, lon: 110.76791 },
            { lat: 28.29524, lon: 110.76795 },
            { lat: 28.29533, lon: 110.76796 },
            { lat: 28.29545, lon: 110.76795 },
            { lat: 28.29559, lon: 110.76791 },
            { lat: 28.29574, lon: 110.76788 },
            { lat: 28.29604, lon: 110.76781 },
            { lat: 28.29619, lon: 110.76784 },
            { lat: 28.29634, lon: 110.76788 },
            { lat: 28.29649, lon: 110.76792 },
            { lat: 28.29663, lon: 110.76795 },
            { lat: 28.29676, lon: 110.76796 },
            { lat: 28.29686, lon: 110.76795 },
            { lat: 28.29694, lon: 110.76781 },
            { lat: 28.29691, lon: 110.76764 },
            { lat: 28.29689, lon: 110.76748 },
            { lat: 28.29688, lon: 110.76735 },
            { lat: 28.29688, lon: 110.76722 },
            { lat: 28.29689, lon: 110.7671 },
            { lat: 28.29691, lon: 110.76699 },
            { lat: 28.29694, lon: 110.76679 },
            { lat: 28.29692, lon: 110.76669 },
            { lat: 28.29684, lon: 110.76665 },
            { lat: 28.29674, lon: 110.76664 },
            { lat: 28.29662, lon: 110.76666 },
            { lat: 28.29648, lon: 110.7667 },
            { lat: 28.29632, lon: 110.76673 },
            { lat: 28.29604, lon: 110.76679 },
            { lat: 28.29593, lon: 110.76674 },
            { lat: 28.29582, lon: 110.76668 },
            { lat: 28.29571, lon: 110.76661 },
            { lat: 28.29561, lon: 110.76653 },
            { lat: 28.29551, lon: 110.76644 },
            { lat: 28.29542, lon: 110.76634 },
            { lat: 28.29533, lon: 110.76624 },
            { lat: 28.29526, lon: 110.76613 },
            { lat: 28.2952, lon: 110.76602 },
            { lat: 28.29515, lon: 110.76591 },
            { lat: 28.29514, lon: 110.76577 },
            { lat: 28.29514, lon: 110.76565 },
            { lat: 28.29509, lon: 110.76556 },
            { lat: 28.29502, lon: 110.76548 },
            { lat: 28.29492, lon: 110.76541 },
            { lat: 28.29482, lon: 110.76535 },
            { lat: 28.2947, lon: 110.76529 },
            { lat: 28.29458, lon: 110.76523 },
            { lat: 28.29447, lon: 110.76515 },
            { lat: 28.29437, lon: 110.76505 },
            { lat: 28.29429, lon: 110.76493 },
            { lat: 28.29423, lon: 110.76476 }
        ]
    },
    {
        codenumber: 'dzdl00000_20250724183906_100m',
        color: '65535',
        level: '0',
        posArr: [
            { lat: 28.26185, lon: 110.83311 },
            { lat: 28.26187, lon: 110.83317 },
            { lat: 28.2619, lon: 110.83322 },
            { lat: 28.26195, lon: 110.83325 },
            { lat: 28.26202, lon: 110.83327 },
            { lat: 28.26209, lon: 110.83329 },
            { lat: 28.26216, lon: 110.83331 },
            { lat: 28.26224, lon: 110.83331 },
            { lat: 28.26232, lon: 110.83332 },
            { lat: 28.26241, lon: 110.83332 },
            { lat: 28.26248, lon: 110.83331 },
            { lat: 28.26256, lon: 110.83329 },
            { lat: 28.26263, lon: 110.83327 },
            { lat: 28.26268, lon: 110.83323 },
            { lat: 28.26276, lon: 110.83311 },
            { lat: 28.26275, lon: 110.83305 },
            { lat: 28.26271, lon: 110.83301 },
            { lat: 28.26266, lon: 110.83298 },
            { lat: 28.2626, lon: 110.83295 },
            { lat: 28.26253, lon: 110.83293 },
            { lat: 28.26245, lon: 110.83292 },
            { lat: 28.26237, lon: 110.83291 },
            { lat: 28.26229, lon: 110.8329 },
            { lat: 28.2622, lon: 110.8329 },
            { lat: 28.26212, lon: 110.83291 },
            { lat: 28.26205, lon: 110.83292 },
            { lat: 28.26198, lon: 110.83295 },
            { lat: 28.26192, lon: 110.83298 },
            { lat: 28.26185, lon: 110.83311 }
        ]
    },
    {
        codenumber: 'dzdl00000_20250724183906_100m',
        color: '65535',
        level: '0',
        posArr: [
            { lat: 28.25329, lon: 110.83924 },
            { lat: 28.2532, lon: 110.83935 },
            { lat: 28.25311, lon: 110.83946 },
            { lat: 28.25301, lon: 110.83957 },
            { lat: 28.25284, lon: 110.83975 },
            { lat: 28.25272, lon: 110.83985 },
            { lat: 28.25259, lon: 110.83996 },
            { lat: 28.25248, lon: 110.84007 },
            { lat: 28.25239, lon: 110.84026 },
            { lat: 28.25242, lon: 110.84039 },
            { lat: 28.2525, lon: 110.84051 },
            { lat: 28.25261, lon: 110.84063 },
            { lat: 28.25284, lon: 110.84077 },
            { lat: 28.25299, lon: 110.8408 },
            { lat: 28.25313, lon: 110.8408 },
            { lat: 28.25328, lon: 110.84078 },
            { lat: 28.25342, lon: 110.84075 },
            { lat: 28.25355, lon: 110.84074 },
            { lat: 28.25374, lon: 110.84077 },
            { lat: 28.25385, lon: 110.84084 },
            { lat: 28.25395, lon: 110.84094 },
            { lat: 28.25404, lon: 110.84107 },
            { lat: 28.25419, lon: 110.84128 },
            { lat: 28.25429, lon: 110.8414 },
            { lat: 28.25438, lon: 110.84151 },
            { lat: 28.25448, lon: 110.84161 },
            { lat: 28.25465, lon: 110.84178 },
            { lat: 28.25475, lon: 110.84189 },
            { lat: 28.25484, lon: 110.84199 },
            { lat: 28.25494, lon: 110.8421 },
            { lat: 28.2551, lon: 110.84229 },
            { lat: 28.25519, lon: 110.84242 },
            { lat: 28.25528, lon: 110.84254 },
            { lat: 28.25538, lon: 110.84266 },
            { lat: 28.25555, lon: 110.8428 },
            { lat: 28.25567, lon: 110.84284 },
            { lat: 28.2558, lon: 110.84286 },
            { lat: 28.25594, lon: 110.84285 },
            { lat: 28.25608, lon: 110.84284 },
            { lat: 28.25622, lon: 110.84282 },
            { lat: 28.25645, lon: 110.8428 },
            { lat: 28.2566, lon: 110.84281 },
            { lat: 28.25674, lon: 110.84282 },
            { lat: 28.25688, lon: 110.84284 },
            { lat: 28.25702, lon: 110.84285 },
            { lat: 28.25715, lon: 110.84285 },
            { lat: 28.25735, lon: 110.8428 },
            { lat: 28.25747, lon: 110.84273 },
            { lat: 28.25758, lon: 110.84263 },
            { lat: 28.25768, lon: 110.84251 },
            { lat: 28.2578, lon: 110.84229 },
            { lat: 28.25785, lon: 110.84213 },
            { lat: 28.25789, lon: 110.84197 },
            { lat: 28.2579, lon: 110.84181 },
            { lat: 28.2579, lon: 110.84165 },
            { lat: 28.25788, lon: 110.8415 },
            { lat: 28.2578, lon: 110.84127 },
            { lat: 28.25773, lon: 110.84115 },
            { lat: 28.25763, lon: 110.84104 },
            { lat: 28.25753, lon: 110.84093 },
            { lat: 28.25735, lon: 110.84076 },
            { lat: 28.25725, lon: 110.84066 },
            { lat: 28.25715, lon: 110.84055 },
            { lat: 28.25706, lon: 110.84044 },
            { lat: 28.2569, lon: 110.84025 },
            { lat: 28.2568, lon: 110.84014 },
            { lat: 28.25671, lon: 110.84003 },
            { lat: 28.25661, lon: 110.83992 },
            { lat: 28.25645, lon: 110.83974 },
            { lat: 28.25635, lon: 110.83964 },
            { lat: 28.25625, lon: 110.83954 },
            { lat: 28.25616, lon: 110.83943 },
            { lat: 28.256, lon: 110.83923 },
            { lat: 28.2559, lon: 110.83909 },
            { lat: 28.2558, lon: 110.83895 },
            { lat: 28.25571, lon: 110.83883 },
            { lat: 28.25555, lon: 110.83873 },
            { lat: 28.25545, lon: 110.83876 },
            { lat: 28.25535, lon: 110.83885 },
            { lat: 28.25525, lon: 110.83898 },
            { lat: 28.25509, lon: 110.83924 },
            { lat: 28.255, lon: 110.83939 },
            { lat: 28.2549, lon: 110.83954 },
            { lat: 28.2548, lon: 110.83966 },
            { lat: 28.25464, lon: 110.83975 },
            { lat: 28.25455, lon: 110.83971 },
            { lat: 28.25445, lon: 110.83962 },
            { lat: 28.25435, lon: 110.83949 },
            { lat: 28.25419, lon: 110.83924 },
            { lat: 28.2541, lon: 110.83908 },
            { lat: 28.254, lon: 110.83893 },
            { lat: 28.2539, lon: 110.83881 },
            { lat: 28.25374, lon: 110.83873 },
            { lat: 28.25364, lon: 110.83878 },
            { lat: 28.25355, lon: 110.83889 },
            { lat: 28.25345, lon: 110.83902 },
            { lat: 28.25329, lon: 110.83924 }
        ]
    }
];

let polygonLayer = null;
//加面
const addPolygon = () => {
    if (!polygonLayer) {
        polygonLayer = olMap.value.layer.createVectorLayer('面图层', 15);
    }
    const result = arr.map(({ color, posArr }) => ({
        color,
        pos: posArr.map(({ lon, lat }) => [lon, lat])
    }));

    result.forEach((item) => {
        olMap.value.vector.addPolygon({
            coordinates: item.pos,
            layer: polygonLayer,
            style: { strokeWidth: 0, strokeColor: '#ffff00', fillColor: '#ffff00' }
        });
    });
    if (olMap.value.layer.getLayerByName('面图层')) {
        olMap.value.layer.fitLayer({
            layer: olMap.value.layer.getLayerByName('面图层'), //图层
            duration: 1000, //移动时间
            paddingList: [100, 100, 100, 100] //添加内边距
        });
    }
};

//清除面
const clearPolygon = () => {
    if (polygonLayer) {
        polygonLayer.getSource().clear();
    }
};
</script>

<style scoped>
.mapContainer {
    width: 100%;
    height: 91vh;
    position: relative;
}
</style>
